<template>
  <view class="com-a">
    <view class="title">子组件A</view>
    <view class="content">
      <text class="text-label">接收到的值：</text>
      <text class="text-value">{{ intent }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    intent: {
      type: String,
      default: ''
    }
  },
  watch: {
    intent(newVal) {
      console.log('子组件A接收到新值：', newVal);
      uni.$emit('updateFromA', newVal);
    }
  }
}
</script>

<style scoped>
/* 子组件A整体样式 */
.com-a {
  font-size: 28rpx;
}

/* 标题样式 */
.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #f0f0f0;
}

/* 内容区域样式 */
.content {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx 0;
}

/* 文本标签样式 */
.text-label {
  color: #666;
  margin-right: 10rpx;
}

/* 文本值样式 */
.text-value {
  color: #007aff; /* 蓝色，与第四张图一致 */
  font-weight: 500;
  word-break: break-all;
}
</style>